<template>
	<view class="register-container">
		<!-- 页面标题 -->
		<view class="register-title">
			<view>短信登录</view>
		</view>

		<!-- 手机号输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="mobile" size="22px" class="input-icon"></wd-icon>
			</view>
			<wd-input v-model="form.phone" placeholder="请输入手机号" type="number" :maxlength="11" input-align="left"
				class="input" @input="onPhoneInput" label="手机号" label-width="140rpx"></wd-input>
		</view>

		<!-- 验证码输入 + 获取按钮 -->
		<view class="input-item code-item">
			<view class="input-icon">
				<wd-icon name="secured" size="22px"></wd-icon>
			</view>
			<wd-input v-model="form.code" placeholder="请输入验证码" type="number" :maxlength="6" input-align="left"
				class="input flex-1" label="验证码" label-width="140rpx"></wd-input>
			<wd-button size="small" type="primary" plain :disabled="!canSendCode" class="btn-code" @click="sendCode">
				{{ codeBtnText }}
			</wd-button>
		</view>

		<!-- 登录按钮 -->
		<view class="btn-register">
			<wd-button type="primary" block :loading="loading" :disabled="!canRegister" @click="login">
				登录
			</wd-button>
		</view>

		<!-- 切换登录/注册方式 -->
		<view class="login-link">
			<text class="link" @click="accountPage">账号登录</text>
			<text class="link" @click="registerPage">注册</text>
		</view>
	</view>
	<WechatLogin/>
</template>

<script setup>
import { reactive, ref, computed, onBeforeUnmount } from 'vue'
 import { useRouter } from 'uni-mini-router'
import { verify_login, loginByVerify } from "@/api/loginApi"
import WechatLogin from "@/components/wechat_login/index"

// 路由实例
const router = useRouter();
const accountPage = () => {
	router.replaceAll({
		name: "account_login"
	})
}
const registerPage = () => {
	router.replaceAll({
		name: "register"
	})
}


// 表单数据（仅保留页面中实际使用的字段）
const form = reactive({
	phone: '18146476094',
	code: ''
})

// 响应式变量（仅保留必要项）
const loading = ref(false)
const codeBtnText = ref('获取验证码')
const timer = ref(null)
const countdown = ref(60)
const isCounting = ref(false)

// 计算属性（适配短信登录场景）
const canSendCode = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.phone) && !isCounting.value
})

const canRegister = computed(() => {
	return /^1[3-9]\d{9}$/.test(form.phone) &&
		form.code.length === 6 &&
		!loading.value
})

// 手机号输入处理
const onPhoneInput = () => {
	// 可添加手机号格式化等逻辑
}

// 发送验证码
const sendCode = () => {
	if (!canSendCode.value) {
		uni.showToast({ title: '手机号格式错误', icon: 'none' })
		return
	}

	uni.showLoading({ title: '发送中...' })
	setTimeout(async () => {
		uni.hideLoading()
		const result = await verify_login({
			mobile: form.phone
		})
		if (result.code == 200) {
			uni.showToast({ title: '验证码已发送', icon: 'success' })
		}
		startCountdown()
	}, 1500)
}

// 验证码倒计时
const startCountdown = () => {
	isCounting.value = true
	codeBtnText.value = `${countdown.value}秒后重发`

	timer.value = setInterval(() => {
		countdown.value--
		codeBtnText.value = `${countdown.value}秒后重发`

		if (countdown.value <= 0) {
			clearInterval(timer.value)
			isCounting.value = false
			codeBtnText.value = '获取验证码'
			countdown.value = 60
		}
	}, 1000)
}

// 登录提交
const login = async () => {
	if (loading.value) return
	loading.value = true
	try {
		const res = await loginByVerify({
			mobile: form.phone,
			code: form.code
		});
		if (res.code === 200) {
			uni.showToast({ title: '登录成功', icon: 'success' })
			router.replaceAll({ name: "doctor_home" })
		} else {
			uni.showToast({ title: res.message || '登录失败', icon: 'none' })
		}
	} catch (err) {
		uni.showToast({ title: '登录失败', icon: 'none' })
		console.error(err)
	}

	loading.value = false
}

// 页面卸载前清理定时器
onBeforeUnmount(() => {
	if (timer.value) {
		clearInterval(timer.value)
	}
})
</script>

<style lang="less">
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';

.register-container {
	padding: 80rpx 40rpx 0;
	background-color: #fff;
	min-height: 100vh;
	box-sizing: border-box;
}

.register-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 80rpx;
	text-align: center;
}

.input-item {
	border-bottom: 1px solid #e5e5e5;
	padding: 15rpx 0;
	margin-bottom: 10rpx;
	display: flex;

	.input-icon {
		flex: 0 0 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.code-item {
	display: flex;
	align-items: center;
	gap: 0rpx;
}

:deep(.wd-input.is-cell) {
	padding-left: 0rpx !important;
}

:deep(.wd-cell) {
	padding-left: 0rpx !important;
}

.wd-input {
	&::v-deep .wd-input__control {
		font-size: 30rpx;
		color: #333;
		height: 80rpx;
		line-height: 80rpx;
	}

	&::v-deep .wd-input__label {
		font-size: 30rpx;
		color: #333;
		text-align: left;
	}
}

.btn-code {
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	flex-shrink: 0;
}

.btn-register {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	border-radius: 16rpx;
	margin: 40rpx 0;
}

.login-link {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	display: flex;
	justify-content: space-between;
}

.link {
	color: #007aff;
}
</style>